<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>人员列表</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/base.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 0 30px;
        }
        table {
            font-weight: 500;
            height: 300px;
        }
        .table td, .table th{
            border: none;
        }
        .table thead th{
            background-color: #f7f7f7;
            border-bottom: none;
            font-weight: 600;
            font-size: 16px;
            color: #999999;
            height: 80px;
            line-height: 80px;
            padding: 0;
            position: sticky;
            top: 0px;
        }
        .table tbody+tbody{
            border-top: none;
        }
        .user-table {
            width: 100%; /* 表格宽度为容器宽度的100% */
            height: 100vh;
            overflow-y: auto;
        }
        .user-table h2{
            background: #fff;
            width: 100%;
            font-weight: 600;
            font-size: 18px;
            color: #000000;
            height: 70px;
            display: flex;
            align-items: center;
            margin-bottom: 0;
        }
        .table-box{
            height: calc(100vh - 140px);
            overflow-y: auto;
        }
        .user-table th, .user-table td {
            text-align: center;
            vertical-align: middle;
            padding: 10px;
            height: 50px; /* 统一设置表头和单元格的高度 */
        }
        /* 调整列宽：新增"操作"列，重新分配宽度比例 */
        .user-table th:first-child, .user-table td:first-child, /* 人员id列 */
        .user-table th:nth-child(3), .user-table td:nth-child(3), /* 身份列 */
        .user-table th:nth-child(4), .user-table td:nth-child(4) { /* 操作列 */
            width: 15%;
        }
        .user-table th:nth-child(2), .user-table td:nth-child(2) { /* 姓名列 */
            width: 55%;
        }
        .user-table td {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 300px;
        }
        /* 删除按钮样式 */
        .delete-btn {
            padding: 4px 12px;
            background-color: #dc3545;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .delete-btn:hover {
            background-color: #c82333;
            color: white;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="user-table">
    <h2>人员列表</h2>
    <div class="table-box">
        <table class="table">
            <thead>
            <tr>
                <th>人员id</th>
                <th>姓名</th>
                <th>身份</th>
                <th>操作</th> <!-- 新增表头：操作列 -->
            </tr>
            </thead>
            <tbody id="userList">
            <!-- 人员列表将动态插入这里 -->
            </tbody>
        </table>
    </div>
</div>
<script src="./js/jquery.min.js"></script>
<script>
    var userToken = localStorage.getItem("user_token");

    // 封装AJAX请求：获取用户列表
    function fetchUserData() {
        $.ajax({
            url: '/base-user/find-list',
            type: 'GET',
            headers: {
                "user_token": userToken
            },
            success: function(result) {
                if (result.code != 200) {
                    alert("查询用户列表失败！" + result.msg);
                } else {
                    var users = result.data;
                    var userList = $('#userList');
                    userList.empty();
                    // 遍历用户数据，新增删除按钮列
                    users.forEach(function(user) {
                        userList.append(`
                            <tr>
                                <td>${user.userId}</td>
                                <td>${user.userName}</td>
                                <td>${user.identity}</td>
                                <!-- 新增删除按钮：携带当前用户ID -->
                                <td>
                                    <button class="delete-btn" data-user-id="${user.userId}">删除</button>
                                </td>
                            </tr>
                        `);
                    });
                }
            },
            error: function(err){
                console.log(err);
                if(err!=null && err.status==401){
                    alert("用户未登录, 即将跳转到登录页!");
                    window.parent.location.href = "/blogin.html";
                }
            }
        });
    }

    // 封装AJAX请求：删除用户
    function deleteUser(userId) {
        // 二次确认，防止误操作
        if (!confirm(`确定要删除ID为 ${userId} 的用户吗？此操作不可恢复！`)) {
            return;
        }

        $.ajax({
            url: '/deleteUser', // 对应后端删除接口地址（与文档2一致）
            type: 'DELETE', // 对应后端@DeleteMapping请求方式
            headers: {
                "user_token": userToken // 携带登录令牌
            },
            data: { id: userId }, // 传递用户ID（与后端@RequestParam Long id参数名一致）
            success: function(result) {
                // 后端返回true表示删除成功（与文档2返回值一致）
                if (result === true) {
                    alert("用户删除成功！");
                    // 重新加载用户列表，更新页面数据
                    fetchUserData();
                } else {
                    alert("用户删除失败，请稍后重试！");
                }
            },
            error: function(err) {
                console.log("删除用户请求异常：", err);
                if (err.status === 401) {
                    alert("用户未登录，无法执行删除操作！即将跳转到登录页！");
                    window.parent.location.href = "/blogin.html";
                } else {
                    alert("删除请求失败，错误信息：" + (err.responseText || "网络异常"));
                }
            }
        });
    }

    // 页面加载完成后初始化
    $(document).ready(function() {
        // 1. 加载用户列表
        fetchUserData();

        // 2. 给删除按钮绑定点击事件（事件委托，处理动态生成的按钮）
        $('#userList').on('click', '.delete-btn', function() {
            // 获取按钮上存储的用户ID
            var userId = $(this).data('user-id');
            // 执行删除操作
            deleteUser(userId);
        });
    });
</script>
</body>
</html>